import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { Field } from '@teamix/ui';
import Pagination from 'components/commonPagination';
import { Header, Body, BodyContent, Content, YunxiaoList } from '@alife/devops-ui';
import ActivityList from 'components/activityList';
import ListEmpty from 'atComponents/ListEmpty';
import ActivitySkeleton from 'components/skeleton/activity';
import { enterPage, Perf } from 'utils/track';
import FilterForm from './filterForm';
import * as actions from '../actions/index';
// import docs from 'utils/docs';
import intl from '../../../../../../../locale';

class Root extends Component {
  static propTypes = {
    activities: PropTypes.arrayOf(PropTypes.object),
    currentPage: PropTypes.number,
    total: PropTypes.number,
  };

  static defaultProps = {
    activities: [],
    currentPage: 1,
    total: 0,
  };

  constructor(props) {
    super(props);
    this.filterField = new Field(this, {
      autoUnmount: false,
    });
  }

  state = {
    pageSize: 10,
  };

  componentDidMount() {
    // 组件加载完成后，获取table数据
    this.props.getGroupActivities(1);

    enterPage('Group-Activity', {
      sendPerf: false,
    });
  }

  onPageNoChange = (page) => {
    const { pageSize } = this.state;
    this.props.getGroupActivities(page, {
      ...this.filterField.getValues(),
      per_page: pageSize,
    });
  };

  onPageSizeChange = (pageSize) => {
    this.setState(
      {
        pageSize,
      },
      () => {
        this.onPageNoChange(1);
      },
    );
  };

  getActivityListJsx() {
    const { activities, isLoading } = this.props;

    if (isLoading) {
      return <ActivitySkeleton />;
    }

    if (activities && activities.length) {
      return (
        <div>
          <YunxiaoList
            dataSource={activities}
            renderItem={(act) => <ActivityList actData={act} {...this.props} />}
          />

          <Perf page={'Group-Activity'} />
        </div>
      );
    }

    const search = this.filterField.getValues();
    if (search.event_filter === '' && (!search.range || search.range.length === 0)) {
      return (
        <ListEmpty fullPage type="project" className="no-btns" image="none" content="暂无动态" />
      );
    }

    return (
      <ListEmpty
        fullPage
        type="project"
        className="no-content no-btns"
        description={'抱歉，未找到匹配结果'}
        imgType="search"
      />
    );
  }

  render() {
    const { total, currentPage } = this.props;
    return (
      <>
        <Header
          title={intl.get({
            id: 'code-assets.groupActivity.containers.root.Dynamic',
            defaultMessage: '动态',
          })}
          operation={
            <>
              <FilterForm {...this.props} field={this.filterField} />
              <span />
            </>
          }
        />

        <Body>
          <BodyContent>
            <Content>{this.getActivityListJsx()}</Content>
            <Pagination
              onChange={this.onPageNoChange}
              current={currentPage}
              total={total}
              onPageSizeChange={this.onPageSizeChange}
              pageSize={this.state.pageSize}
            />
          </BodyContent>
        </Body>
      </>
    );
  }
}

export default connect(
  (state) => state.group.groupActivity,
  (dispatch) => bindActionCreators(actions, dispatch),
)(Root);
